<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.min.js"></script>
    <style>
        .box {
            color: red;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // JSX中使用三元运算符
        // let price = 7999
        // let myDom = (
        //     <div>当前手机价格是{price} --- {price > 5000 ? '很贵' : '很便宜'}</div>
        // )

        // JSX中渲染数组
        // let arr = [
        //     <p>新闻列表1</p>,
        //     <p>新闻列表2</p>,
        //     <p>新闻列表3</p>,
        //     <p>新闻列表4</p>,
        //     <p>新闻列表5</p>,
        //     <p>新闻列表6</p>
        // ]
        // let myDom = <div>{arr}</div>

        // JSX中设置属性
        // let text = '点我去百度'
        // let linkUrl = 'https://www.baidu.com'
        // let myDom = <a href={linkUrl}>{text}</a>

        // JSX中设置样式
        // let modStyle = { color: 'red', backgroundColor: 'pink' } // 注意：必须是一个对象,且使用大驼峰命名法
        // let myDom = <p style={modStyle}>给p标签添加样式</p>

        // JSX中使用类名添加样式：在JSX中不能使用class这个属性，因为class是JS中的关键字，所以使用className代替
        let myDom = <p className="box">给p标签添加样式</p>

        ReactDOM.render(myDom, document.getElementById('app'))
    </script>
</body>

</html>